// components/home/gauge/gauge.js
import * as echarts from '../ec-canvas/echarts';

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    speed: {
      type: Number,
      value: 0.00
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    ec: {
      // onInit: initChart,
      lazyLoad: true, // 懒加载
    }
  },

  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
      this.initchart(this.data.speed)
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached: function() {
    // 在组件实例进入页面节点树时执行
    this.initchart(this.data.speed)
  },
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
  },
  /**
   * 数据监听器
   */
  observers: {
    'speed': function(val){
      this.initchart(val)
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    loadchart(data){
      // 绑定组件（ec-canvas标签的id）
      let ec_canvas = this.selectComponent('#mychart-dom-gauge');
      ec_canvas.init((canvas,width,height,dpr)=>{
        const chart =echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // 解决模糊显示的问题
        })
        // echart表格的内容配置
        var option = {
          series: [{
            type: 'gauge',
            radius: '100%', //设置仪表盘的大小
            // 其他配置项
            min: 0,
            max: 1000,
            splitNumber: 4,
            startAngle: 225,//仪表盘最右边的度数
            endAngle: -45,//仪表盘最左边的度数
            axisLine: {
              // 其他配置项
              lineStyle: {
                color: [                    
                  [1, 'rgba(76,104,239,.4)']
                ],
                width: 0,//设置为0，仪表盘进度不显示
                shadowBlur: 0
              }
            },
            progress:{
              // show:false
              // show:true,
              width: 16
            },
            axisLabel: {
              fontFamily: "Roboto-Medium, Roboto",
              fontSize: 14,
              fontWeight: 500
            },
            axisTick: {
              // 仪表盘刻度线的相关样式设置
              splitNumber: 8,
              length: 16,
              lineStyle: {
                color: 'auto',
                width: 3,
                opacity: 0.8
              },
            },
            splitLine: { // 仪表盘刻度距离刻度线的距离
              length: 16,
              lineStyle: {
                color: ['rgba(76,104,239,0)'],
                width: 3,
                opacity: 0
              }
            },
            pointer:{//仪表盘指针的样式设置
              show:false
            },
            detail: {
              // 仪表盘详情配置
              offsetCenter: ['0', '0'],
              textStyle: {
                fontSize: 36
              },
              // lineHeight: 40,
              valueAnimation: true,
              formatter: function(value) {
                return "{value|" + value.toFixed(2) +"}\n{unit|Mbps}";//设置值加单位
              },
              rich: {
                value: {
                  fontSize: 36,
                  fontFamily: 'Roboto-Medium, Roboto',
                  fontWeight: 500,
                  color: "rgba(255,255,255, 1)"
                },
                unit: {
                  fontSize: 16,
                  fontWeight: 400,
                  fontFamily: 'PingFangSC-Regular, PingFang SC',
                  color: "rgba(255,255,255,0.6)",
                  padding: [25, 0, 0, 0]//设置单位的距离
                }
              }
            },
            data: [{
              value: data,
            }]
          }]
        }
        let baifen = option.series[0].data[0].value / option.series[0].max
        option.series[0].axisLine.lineStyle.color.unshift([baifen,'rgb(76,104,239)'])
        chart.setOption(option);
        return chart;
      })
    },
    initchart(data){
      // 传递后台数据到图表中，进行懒加载图表
      this.loadchart(data);
    },
  }
})
